织梦cms| 帝国cms| WordPress discuz| phpcms| z-blog| ecshop| 其他cms|

WordPress

推荐列表 站点导航

当前位置：首页 > 建站教程 > WordPress >

JS如何实现手机端输入验证码效果

来源:网络整理  作者:  发布时间:2020-12-18 18:53
之前在“掘金”上看到这样一个demo我觉得很有意思，于是今天把它搬下来，记在自己的“小本本”里也许会对以后的...

computed: {

width: 280px;

text-align: center;

animation-name: coruscate;

}

-ms-flex-pack: justify;

padding-left: 20px;

height: 32px;

}

color: #333333;

}

}

<label

content: '';

0% {

animation-iteration-count: infinite;

@focus="focused = true"

.v-code .line.animated::before {

结构部分html：

background-color: #ffffff;

想法：

},

v-text="codeArr[index]"

},

<style>

}

.heading-2 {

el: '#app',

codeArr() {

opacity: 0

示例代码：

position: absolute;

v-for="item,index in codeLength"

1、通过CDN引入vue.js

padding-top: 60px;

line-height: 32px;

display: block;

}

transform-origin: 0 100%;

setTimeout(() => {

.app {

var app = new Vue({

}

maxlength="6"

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

margin-right: auto;

type="tel"

}

</div>

focused: false

opacity: 0

}

alert(`vcode: ${this.code}`)

JS如何实现手机端输入验证码效果 (https://www.wpmee.com/) javascript教程 第2张

<h2>验证码:</h2>

margin: 0;

}

v-model="code"

code(newVal) {

margin-left: auto;

},

watch: {

for="vcode"

bottom: 0;

display: -ms-flexbox;

4、这样就实现了 点击label触发 input焦点，调用键盘。

.v-code .line {

code: '',

this.$refs.vcode.blur()

to {

@blur="focused = false"

Javascript部分

-webkit-box-pack: justify;

2、然后每个label for属性指向同一个 id 为vcode 的input，

25% {

@keyframes coruscate {

},

cursorIndex() {

}

ref="vcode"

max-width: 320px;

display: block;

left: 50%;

也许会对以后的项目有点用，若要自己去实现这样一个案例也能实现，但是可能没有那么“妙”。

opacity:0;

之前在“掘金”上看到这样一个demo 我觉得很有意思，于是今天把它搬下来，记在自己的“小本本”里

</div>  

telDisabled: false,

width: 40px;

>

}

75% {

opacity: 1

// this.telDisabled = true

2、代码

justify-content: space-between;

top: 20%;

-webkit-box-align: center;

}

padding: 0;

}

if (newVal.length > 5) {

<div>

.v-code .line::after {

content: '';

animation-duration: 1s;

body {

background-color: #aaaaaa;

animation-fill-mode: both;

transform: scaleY(.5);

opacity: 0

-ms-flex-align: center;

width: 1px;

margin-left: auto;

top: 200%;

JS如何实现手机端输入验证码效果 (https://www.wpmee.com/) javascript教程 第1张

<div>

3、为了能够触发input焦点， 将input 改透明度样式隐藏，

position: relative;

box-sizing: border-box;

margin-right: auto;

background-color: #333333;

codeLength: 6,

</style>  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

}

width: 100%;

</label>

运行效果：

left: 0;

css部分：

height: 60%;

* {

position: absolute;

display: -webkit-box;

id="vcode"

}

.v-code input {

<input

margin-top: 20px;

return this.code.split('')

-webkit-tap-highlight-color: transparent;

this.code = newVal.replace(/[^\d]/g,'')

opacity: 1

padding-right: 20px;

position: absolute;

display: flex;

50% {

height: 1px;

}

data: {

class="line"

:class="{'animated': focused && cursorIndex === index}"

return this.code.length

font-size: 28px;

})  

align-items: center;

1、使用label标签做显示验证码的框，

}, 500)

font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;

position: relative;

}

.v-code {

:disabled="telDisabled">

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jz/wp/5276.shtml

上一篇：wordpress抓取文章第一张远
下一篇：网站seo优化外部链接应该
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程
最新文章
ludou_se_only); } add_action(s ludou_se_only); } add_action(s

时间：2021-01-23

所以经常导致输错密码的 所以经常导致输错密码的

时间：2021-01-23

WordPress措施打开速度慢的 WordPress措施打开速度慢的

时间：2021-01-22

WordPress回覆评论自动添加 WordPress回覆评论自动添加

时间：2021-01-22

我们可以通过下面的代码 我们可以通过下面的代码

时间：2021-01-22

如何修改WordPress默认脚色 如何修改WordPress默认脚色

时间：2021-01-20

同样的修改文件就行 同样的修改文件就行

时间：2021-01-20

少数善意的转载者既使没 少数善意的转载者既使没

时间：2021-01-20

热门文章
WordPress新手安装教程(图文) WordPress新手安装教程(图文)

时间：2020-12-28

在设置菜单中增加WordPress私密 隐藏的全部 在设置菜单中增加WordPress私密 隐藏的全部

时间：2021-01-10

WordPress博客程序常见错误的解决方法 WordPress博客程序常见错误的解决方法

时间：2020-12-28

WordPress程序打开速度慢的三种解决方法 WordPress程序打开速度慢的三种解决方法

时间：2021-01-10

wordpress使用代码在每篇文章尾部添加版权 wordpress使用代码在每篇文章尾部添加版权

时间：2020-12-14

WordPress博客措施常见错误的办理要领 WordPress博客措施常见错误的办理要领

时间：2021-01-15

关于WordPress的SEO优化相关的一些PHP页面脚 关于WordPress的SEO优化相关的一些PHP页面脚

时间：2021-01-07

WordPress措施打开速度慢的三种办理要领 WordPress措施打开速度慢的三种办理要领

时间：2021-01-22

详解WordPress中的头像缓存和署理中的缓存 详解WordPress中的头像缓存和署理中的缓存

时间：2021-01-15

少数善意的转载者既使没有看到版权信息 少数善意的转载者既使没有看到版权信息

时间：2021-01-20

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

JS如何实现手机端输入验证码效果

2020-12-18　编辑：

computed: {

width: 280px;

text-align: center;

animation-name: coruscate;

}

-ms-flex-pack: justify;

padding-left: 20px;

height: 32px;

}

color: #333333;

}

}

<label

content: '';

0% {

animation-iteration-count: infinite;

@focus="focused = true"

.v-code .line.animated::before {

结构部分html：

background-color: #ffffff;

想法：

},

v-text="codeArr[index]"

},

<style>

}

.heading-2 {

el: '#app',

codeArr() {

opacity: 0

示例代码：

position: absolute;

v-for="item,index in codeLength"

1、通过CDN引入vue.js

padding-top: 60px;

line-height: 32px;

display: block;

}

transform-origin: 0 100%;

setTimeout(() => {

.app {

var app = new Vue({

}

maxlength="6"

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

margin-right: auto;

type="tel"

}

</div>

focused: false

opacity: 0

}

alert(`vcode: ${this.code}`)

JS如何实现手机端输入验证码效果 (https://www.wpmee.com/) javascript教程 第2张

<h2>验证码:</h2>

margin: 0;

}

v-model="code"

code(newVal) {

margin-left: auto;

},

watch: {

for="vcode"

bottom: 0;

display: -ms-flexbox;

4、这样就实现了 点击label触发 input焦点，调用键盘。

.v-code .line {

code: '',

this.$refs.vcode.blur()

to {

@blur="focused = false"

Javascript部分

-webkit-box-pack: justify;

2、然后每个label for属性指向同一个 id 为vcode 的input，

25% {

@keyframes coruscate {

},

cursorIndex() {

}

ref="vcode"

max-width: 320px;

display: block;

left: 50%;

也许会对以后的项目有点用，若要自己去实现这样一个案例也能实现，但是可能没有那么“妙”。

opacity:0;

之前在“掘金”上看到这样一个demo 我觉得很有意思，于是今天把它搬下来，记在自己的“小本本”里

</div>  

telDisabled: false,

width: 40px;

>

}

75% {

opacity: 1

// this.telDisabled = true

2、代码

justify-content: space-between;

top: 20%;

-webkit-box-align: center;

}

padding: 0;

}

if (newVal.length > 5) {

<div>

.v-code .line::after {

content: '';

animation-duration: 1s;

body {

background-color: #aaaaaa;

animation-fill-mode: both;

transform: scaleY(.5);

opacity: 0

-ms-flex-align: center;

width: 1px;

margin-left: auto;

top: 200%;

JS如何实现手机端输入验证码效果 (https://www.wpmee.com/) javascript教程 第1张

<div>

3、为了能够触发input焦点， 将input 改透明度样式隐藏，

position: relative;

box-sizing: border-box;

margin-right: auto;

background-color: #333333;

codeLength: 6,

</style>  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

}

width: 100%;

</label>

运行效果：

left: 0;

css部分：

height: 60%;

* {

position: absolute;

display: -webkit-box;

id="vcode"

}

.v-code input {

<input

margin-top: 20px;

return this.code.split('')

-webkit-tap-highlight-color: transparent;

this.code = newVal.replace(/[^\d]/g,'')

opacity: 1

padding-right: 20px;

position: absolute;

display: flex;

50% {

height: 1px;

}

data: {

class="line"

:class="{'animated': focused && cursorIndex === index}"

return this.code.length

font-size: 28px;

})  

align-items: center;

1、使用label标签做显示验证码的框，

}, 500)

font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;

position: relative;

}

.v-code {

:disabled="telDisabled">

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供学习参考！
本文地址为 https://v30.fanwenzhu.com/jz/wp/5276.shtml

相关文章

风云图片

ludou_se_only); } add_action(s

ludou_se_only); } add_action(s

所以经常导致输错密码的

所以经常导致输错密码的

WordPress措施打开速度慢的

WordPress措施打开速度慢的

WordPress回覆评论自动添加

WordPress回覆评论自动添加

我们可以通过下面的代码

我们可以通过下面的代码

如何修改WordPress默认脚色

如何修改WordPress默认脚色

推荐阅读

返回WordPress频道首页